<template>
    <div class="feedbackDig popUp-wrapper">
        <el-dialog
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :before-close="handleClose">
            <p class="feedbackTitle">意见反馈</p>
            <form action="">
                <div class="textArea-wrapper">
                    <textarea ref='input-areaText' id="textArea" @keyup="checkText" v-model="areaText" placeholder=""></textarea>
                    <span @click="getFocus('input-areaText')" v-if="!areaText">您的建议对我们很重要(200字)</span>
                </div>
            </form>

            <span slot="footer" class="dialog-footer">
                <div class="btn-wrapper el-pay-page">
                    <!-- <el-button  @click='handleClose()'>取 消</el-button> -->
                    <el-button id="submitBtn" @click="submitText">提 交</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
@import '~style/modify.styl';

.feedbackTitle {
  font-size: $font-size-large-xxl;
  color: $color-course-title;
  font-weight: bold;
}

form
  margin-top: 40px;
  width: 275px;
  height: 172px;
  background: rgba(245, 245, 245, 1);
  @media (min-width: 1920px)
    width: 312px
    height: 205px
    margin-top: 60px;


.textArea-wrapper {
  // width: 100%;
  height: 100%;
  padding: 10px;
  margin: 0 auto ;
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
  span{
    position: absolute;
    z-index: 100;
    left: 10px;
    top: 5px;
  }
  textarea {
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    resize: none;
    font-size: $font-size-small;
    background: rgba(245, 245, 245, 1);
    @media (min-width: 1920px){
      font-size: 15px;
    }
  }

  textarea::-webkit-input-placeholder {
    color: $color-text-ll;
  }

  textarea::-moz-placeholder {
    color: $color-text-ll;
  }

  textarea::-moz-placeholder {
    color: $color-text-ll;
  }

  textarea::-ms-input-placeholder {
    color: $color-text-ll;
  }
}
</style>

<script>
import { feedbackAdd, canFeedBack } from '../../api/getData'
import { mapActions, mapState } from 'vuex'
import { userInfo } from 'api/getData'
import mixins from 'plus/mixin'
export default {
  data() {
    return {
      areaText: '',
    }
  },
  mixins: [mixins.mixin],
  computed: {
    ...mapState(['feedBackShow', 'isLogin', 'currentUser']),
    dialogVisible() {
      return this.feedBackShow;
    }
  },
  methods: {
    ...mapActions(['setSideShowFn', 'setDialogClose']),
    handleClose() {
      this.areaText = ''
      this.setSideShowFn(false);
    },
    getFocus(el){
      this.$refs[el].focus()
    },
    ideaFn() {
      this.setSideShowFn(true);
    },
    submitText(){
      let text = this.areaText,
          warningBool = true

      if (!text) { // 内容为空的时候
        this.warning()
        return
      }
      if (text.length > 200) {
        this.warningLong()
        return
      }
      // if (this.isLogin) {
        canFeedBack(this.currentUser.type, this.currentUser.cluesOrStuId.toString()).then(res => {
          warningBool = res.data.msg
          text = this.filterHtmlTagFn(text)
            userInfo(this.currentUser.type, this.currentUser.cluesOrStuId).then(data => { // 发送请求拿到用户名
              feedbackAdd(data.info.name, text, this.currentUser.type, this.currentUser.cluesOrStuId, data.info.phone).then(data => {
                warningBool && this.open()
                warningBool && this.setSideShowFn(false)
                this.areaText = ''
              })
            })
          // if (!warningBool) {
          //   // this.$alert('当天最多填写10次意见反馈', '提示', {
          //   //   confirmButtonText: '确定',
          //   //   showClose: false,
          //   //   callback: action => {
          //   //     this.areaText = ''
          //   //     this.setSideShowFn(false)
          //   //   }
          //   // });
          // } else {
          //     text = this.filterHtmlTagFn(text)
          //     userInfo(this.currentUser.type, this.currentUser.cluesOrStuId).then(data => { // 发送请求拿到用户名
          //       feedbackAdd(data.info.name, text, this.currentUser.type, this.currentUser.cluesOrStuId, data.info.phone).then(data => {
          //         warningBool && this.open()
          //         warningBool && this.setSideShowFn(false)
          //         this.areaText = ''
          //       })
          //     })
          // }
        })
      // } else {
      //   // this.setDialogClose(true)
      //   this.setSideShowFn(true)
      //   this.$alert('登录后才可以填写意见反馈哦!', '提示', {
      //     confirmButtonText: '立即登录',
      //     showClose: true,
      //     callback: action => {
      //       if (action == 'confirm') {
      //         setTimeout(() => {
      //           this.setDialogClose(true)
      //         }, 400);
      //       }
      //     }
      //   });
      // }

    },
    open() {
      this.$message({
        message: '提交成功，谢谢您的宝贵意见！',
        type: 'success'
      });
    },
    warning() {
      this.$message({
        message: '内容不能为空哦！',
        type: 'warning'
      });
    },
    warningLong() {
      this.$message({
        message: '保存失败!内容字数0~200!',
        type: 'warning'
      });
    },
    warningText() {
      this.$message({
        message: '亲！内容字数只能0~200!',
        type: 'warning'
      });
    },
    checkText() {
      this.areaText = this.areaText.replace(/\s/gi, '')
      if (this.areaText.length > 200) {
        this.warningText()
        this.areaText = this.areaText.slice(0, 200)
      }

    }
  },
  watch: {
    areaText(text) {
      let target = document.getElementById('submitBtn')
      if (text.length !== 0) {
        target.style.opacity = 1;
        target.style.backgroundColor = 'rgba(255,98,82,1)';
      } else {
        target.style.opacity = .5;
        target.style.backgroundColor = 'rgba(255,98,82,1);';
      }
    }
  }
}
</script>
